<%--
    Document   : Masterpage_top
    Created on : Mar 25, 2013, 2:33:11 PM
    Author     : TungNT60513
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<link href="css/top.css" type="text/css" rel="stylesheet"/>
<link href="css/search.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/commonjs.js"></script>
<script type="text/javascript" src="js/commonjs.js"></script>
<script type="text/javascript" src="js/vietnamese.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/searchonpage.js"></script>
<style> /*hidden login form*/
    #form_background{
        background-image: url(img/formbg.png);
    }
    .lg_form_textbox input[type='text'] {
        background-image: url('img/userIcon.png');
        background-position: 0px 1px;
        background-repeat: no-repeat;
    }
    .lg_form_textbox input[type='password'] {
        background-image: url('img/passIcon.png');
        background-position: 0px 1px;
        background-repeat: no-repeat;
    }
</style>
<script type="text/javascript" src="js/commonjs.js"></script>
<script type="text/javascript" >
    var banners = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg',
        'img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/10.jpg','img/11.jpg',
        'img/12.jpg','img/13.jpg','img/14.jpg','img/15.jpg'];
    
    function loadBanner(){
        
        if (sessionStorage.getItem('Username')!=null){
            document.getElementById("loginUsername").textContent = sessionStorage.getItem('Username');
            document.getElementById("form_background").style.display ='none';
            document.getElementById("login_button").style.display='none';
            document.getElementById("register_button").style.display = 'none';
            document.getElementById("loginIcon").style.display='block';
            document.getElementById("loginUsername").style.display="block";
        }
        var randomBanner = Math.floor(Math.random()*banners.length);
        var image = new Image();
        document.getElementById("banner").style.backgroundImage  = 'url('+banners[randomBanner]+')';
    }
    function showLoginForm(){
        document.getElementById("form_background").style.display = 'block';
    }
    function closeLoginForm(){
        document.getElementById("form_background").style.display = 'none';
    }
    function inFocus(number){
        var item = document.getElementsByClassName('lg_form_textbox');
        item[number].style.backgroundColor  = '#f6f6f6';
        item[number].style.paddingLeft = '0px';
        item[number].style.borderLeft = '7px #747474 solid';
    }
    function outFocus(number){

        var item = document.getElementsByClassName('lg_form_textbox');
        item[number].style.backgroundColor  = 'transparent';
        item[number].style.paddingLeft = '7px';
        item[number].style.borderLeft = 'none';
    }

    function checkMinLengthLogin(){
        var item = document.getElementsByName('txtUsername');
        if (item[0].value.trim().length <5){
            item[0].setAttribute('placeholder', 'Nhập nhiều hơn 4 kí tự');
            item[0].value='';
            return false;
        }
        item = document.getElementsByName("txtPassword");
        if (item[0].value.trim().length <5){
            item[0].setAttribute('placeholder', 'Nhập nhiều hơn 4 kí tự');
            item[0].value='';
            return false;
        }
        return true;
    }
    function changeIconTo(name){
        if (name=='logout'){
            document.getElementById("loginIcon").src = 'img/logoutIcon.png';
        }else document.getElementById("loginIcon").src = 'img/loginIcon.png';
    }
    function logOutUser(){
        
        if (sessionStorage.length!=0){
            var xmlHttp = getXMLHttpRequest();

            xmlHttp.open("GET","AjaxLogoutServlet",true);
            xmlHttp.send();
            
            sessionStorage.clear();
            
            document.getElementById("login_button").style.display='block';
            document.getElementById("register_button").style.display = 'block';
            document.getElementById("loginIcon").style.display='none';
            document.getElementById("loginUsername").style.display="none";
        }
    }
    function loadUserXMLDoc()
    {
        if (!checkMinLengthLogin()){
            return false;
        }

        username = document.getElementsByName("txtUsername")[0].value;
        password = document.getElementsByName("txtPassword")[0].value;


        var xmlHttp = getXMLHttpRequest();

        xmlHttp.onreadystatechange=function(){
            if (xmlHttp.readyState==4 && xmlHttp.status==200) // readyState==4 ->khong xay ra van de gi, da nhan duoc response tu server
            // status=200 ->trang thai response tra lai dau hieu tot
            {
                
                var xml = xmlHttp.responseXML;
                if (xml!=null){
                    var name = xml.getElementsByTagName("Username")[0].firstChild.nodeValue;
                    sessionStorage.setItem("Username",xml.getElementsByTagName("Username")[0].firstChild.nodeValue); // Lay node dau tien cua tag Username, gan cho item
                    sessionStorage.setItem("Password",xml.getElementsByTagName("Password")[0].firstChild.nodeValue);
                    sessionStorage.setItem("Email",xml.getElementsByTagName("Email")[0].firstChild.nodeValue);
                    sessionStorage.setItem("isAdmin",xml.getElementsByTagName("isAdmin")[0].firstChild.nodeValue);
                    
                    document.getElementById("loginUsername").textContent = name; //gan name vao loginUsername
                    document.getElementById("form_background").style.display ='none';
                    document.getElementById("login_button").style.display='none';
                    document.getElementById("register_button").style.display = 'none';
                    document.getElementById("wrong_user").style.display = 'none';
                    document.getElementById("loginIcon").style.display='block';
                    document.getElementById("loginUsername").style.display="block";

                    // Xoa username va pw da nhap (gan txt rong) -> bao mat user
                    var item = document.getElementsByName('txtUsername');
                    item[0].setAttribute('placeholder', 'Tên tài khoản');
                    item[0].value='';
                    item = document.getElementsByName("txtPassword");
                    item[0].setAttribute('placeholder', 'Mật khẩu');
                    item[0].value='';
                   
                    if (window.location.href.toString().indexOf("register.jsp")!=-1){
                        window.location.href="homePage.jsp";
                    }

                }
                else{
                    document.getElementById("wrong_user").style.display = 'block';
                }
            
            } // end if
        } // end function

        xmlHttp.open("GET","AjaxLoginServlet?txtUsername="+username+"&txtPassword="+password,true);
        xmlHttp.send();
        return false;
    }

    function loadAllXMLDoc(){
        context = '${pageContext.request.contextPath}';
        if(localStorage.getItem("songxml")==null || localStorage.getItem("artistxml")==null ||
            localStorage.getItem("albumxml")==null || localStorage.getItem("playlistxml")==null||localStorage.getItem("historyxml")==null){
            var xml = new XMLSerializer().serializeToString(loadXMLDoc(context+"/xml/Songs.xml"));
            localStorage.setItem("songxml",xml);
            xml = new XMLSerializer().serializeToString(loadXMLDoc(context+"/xml/Artists.xml"));
            localStorage.setItem("artistxml",xml);
            xml = new XMLSerializer().serializeToString(loadXMLDoc(context+"/xml/Albums.xml"));
            localStorage.setItem("albumxml",xml);
            xml = new XMLSerializer().serializeToString(loadXMLDoc(context+"/xml/Playlists.xml"));
            localStorage.setItem("playlistxml",xml);
            var d = new Date();
            var year = d.getFullYear();
            var week = getWeekNo();
            xml = new XMLSerializer().serializeToString(loadXMLDoc(context+"/xml/history/"+year+"/week"+week+".xml"));
            localStorage.setItem("historyxml",xml);
        }
    }

    // -->
</script>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TOP</title>
        <link href="css/top.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <script>
            loadAllXMLDoc();
        </script>
        <div id="search_bar">
            <div class="search">
                <form id="_fmSearch" action="search.jsp">
                    <div id="searchDiv">
                        <input type="image" src="img/btnSearch.png" class="btnSearch"
                               value="" title="Tìm kiếm" />
                        <input type="search" alt="Tìm kiếm" name="query" class="txtSearch"
                               autocomplete="off"
                               id="search_input"
                               onkeyup="ExecuteSearch(event,'${pageContext.request.contextPath}')"
                               placeholder="Nhập từ khóa tìm kiếm" /> <!--thuc thi moi khi nhap vao 1 character-->
                    </div>
                </form>
                <div id="user_section">
                    <img onclick="logOutUser()" src="img/loginIcon.png" width="30px" title="Thoát" height="30px" id="loginIcon" onmouseover="changeIconTo('logout')" onmouseout="changeIconTo('login')"/>
                    <a href="manageuser.jsp"><button title="Quản lý người dùng" class="rg_button" id="loginUsername"></button></a>
                    <button type="button" onclick="showLoginForm()" class="lg_button" id="login_button" >Đăng nhập</button>
                    <a href="register.jsp"><button type="button" class="rg_button" id="register_button" >Đăng ký</button></a>


                </div><!-- end div#user_section -->
            </div><!-- end div.search -->
        </div><!-- end div#search_bar -->
        <div id="top">


            <div id="top_content">
                <div id="header">
                    <div id="banner">
                    </div>
                </div>

                <div id="under_header">
                    <div class="main_nav">
                        <ul>
                            <li class="li_Home"><a href="homePage.jsp" class="btnHome"><img src="img/btnHome.png" height="40px" width="40px"/> </a></li>
                            <li><a href="musicplayer.jsp">Bài hát</a></li>
                            <li><a href="albums.jsp">Album</a></li>
                            <li><a href="playlists.jsp">Playlist</a></li>
                        </ul>
                    </div>


                </div><!-- end div#under_header -->
            </div><!-- end div#top_content -->
        </div><!-- end div#top -->

        <div id="form_background">
            <script>loadBanner();</script>
            <div class="float_form">
                <form id="login_form" onsubmit="return loadUserXMLDoc()" method="POST">
                    <div class="float_form_header">
                        <img src="img/closeIcon.png" width="23px" height="23px" onclick="closeLoginForm()" title="Đóng cửa sổ đăng nhập"/>
                        <span>Đăng nhập</span>
                    </div>
                    <div class="float_form_main">
                        <div class="lg_form_textbox"><input required maxlength="15" class="lg_input" type="text" name="txtUsername" placeholder="Tên đăng nhập" pattern="[0-9A-Za-z][0-9A-Za-z]*" onfocus="inFocus(0)" onblur="outFocus(0)" autofocus/></div>
                        <div class="lg_form_textbox"><input required maxlength="15" class="lg_input" type="password" name="txtPassword" placeholder="Mật khẩu" onfocus="inFocus(1)" onblur="outFocus(1)" /></div>
                    </div>
                    <div class="float_form_footer">
                        <p id="wrong_user">Sai tên đăng nhập hoặc mật khẩu! </p>
                        <button type="submit" class="login_button"">Đăng nhập</button>
                    </div>
                </form>
            </div>
        </div>

    </body>
</html>